<template>
  <div>
    <button @click="fn1">query传参</button>
    <button @click="fn2">params传参</button>
  </div>
</template>

<script>
export default {
  name: 'CollectPage',
  methods: {
    fn1 () {
      // this.$router.push('/like')
      // query传参不用改路由规则
      // this.$router.push({
      //   path: '/like',
      //   query: {
      //     name: 'jack',
      //     age: 16,
      //     id: 99
      //   }
      // })

      // 也可以自己拼接
      // this.$router.push('/like?name=jack&age=16&id=999')

      // 建议如果要传参，就用name
      // 因为name既支持query又支持params
      this.$router.push({
        name: 'like',
        query: {
          name: 'jack',
          age: 16,
          id: 99
        }
      })
    },

    fn2 () {
      // params方式传参，不支持path
      // 只支持name
      // this.$router.push({
      //   path: '/user',
      //   params: {
      //     name: 'jack',
      //     age: 16,
      //     id: 99
      //   }
      // })

      // 当初路由规则里就有name和path
      // params这种建议传敏感数据
      this.$router.push({
        name: 'user',
        params: {
          name: 'jack',
          age: 16,
          id: 99
        }
      })
    }
  }
}
</script>
